<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圣杯布局</title>
    <style>
        body {
            font: 14px Helvetica;
            background: #999;
        }

        #main {
            min-height: 600px;
            margin: 0px;
            padding: 0px;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-flex: row;
            flex-flow: row;
            text-align: center;
        }

        #main > article {
            margin: 4px;
            padding: 5px;
            border: 1px solid #cccc33;
            border-radius: 7pt;
            background: #dddd88;
            -webkit-flex: 3 1 60%;
            flex: 3 1 60%;
            -webkit-order: 2;
            order: 2;
        }

        #main > nav {
            margin: 4px;
            padding: 5px;
            border: 1px solid #8888bb;
            border-radius: 7pt;
            background: #ccccff;
            -webkit-flex: 1 6 20%;
            flex: 1 6 20%;
            -webkit-order: 1;
            order: 1;
        }
        #main > aside {
            margin: 4px;
            padding: 5px;
            border: 1px solid #8888bb;
            border-radius: 7pt;
            background: #ccccff;
            -webkit-flex: 1 6 20%;
            flex: 1 6 20%;
            -webkit-order: 3;
            order: 3;
        }

        header,
        footer {
            display: block;
            margin: 4px;
            padding: 5px;
            min-height: 100px;
            border: 1px solid #eebb55;
            border-radius: 7pt;
            background: #ff33bb;
            text-align: center;
        }

        /* 窄到不足以支持3栏 */
        @media all and (max-width: 640px) {
            /* 当宽度小于640的时候，让沿着侧轴排列 */
            #main {
                -webkit-flex-flow: column;
                flex-flow: column;
            }
            /* 同时按照自然顺序来排列 */
            #main > article ,
            #main > nav,
            #main > aside {
                -webkit-order: 0;
                order: 0;
            }

            #main > nav,
            #main > aside,
            header,
            footer {
                min-height: 50px;
                min-height: 50px;
            }
        }


    </style>
</head>
<body>
    <header>
        header
    </header>
    <div id="main">
        <article>
            article
        </article>
        <nav>
            nav
        </nav>
        <aside>
            aside
        </aside>
    </div>
    <footer>
        footer
    </footer>
</body>
</html>